<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="static/images/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="static/images/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
    <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
    <meta name="description" content="Bootstrap-Admin基于bootstrap5的免费开源的响应式后台管理模板">
    <meta name="author" content="ajiho">
    <link rel="stylesheet" href="lib/bootstrap-icons/font/bootstrap-icons.css">
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/bootstrap-admin.min.css">
    <!--  代码高亮css  -->
    <link rel="stylesheet" href="lib/prismjs/themes/prism-okaidia.css">
    <title>Bootstrap-Admin - 开源免费响应式后台管理系统模板</title>
</head>
<body>

<!--头部导航-->
<ul class="bsa-header">
    <!--   移动端侧边栏toggler(不可删除) -->
    <li>
        <div class="bsa-nav-item bsa-mobile-sidebar-toggler-item">
            <i class="bi bi-list"></i>
        </div>
    </li>
    <!--  搜索框表单部分  -->
    <li>
        <div class="bsa-nav-item bsa-cursor-default bsa-search-form-item">
            <form class="bsa-search-form" action="#">
                <input type="text" class="form-control bsa-search-form-control" name="keyword" aria-label="搜索关键词"
                       placeholder="搜索关键词">
                <button class="bsa-search-submit-btn" type="submit"><i class="bi bi-search"></i></button>
                <button class="bsa-search-close-icon" type="button"><i class="bi bi-x-lg"></i></button>
            </form>
        </div>
    </li>
    <!--  空白占位符(可以让.bsa-header-item左右分布)   -->
    <li class="bsa-spacer"></li>
    <!--  移动端显示的搜索按钮(和搜索框是配套使用)      -->
    <li>
        <div class="bsa-nav-item bsa-mobile-search-toggler-item">
            <i class="bi bi-search"></i>
        </div>
    </li>
    <!--   拓展应用(建议把拓展的连接放在这里,以免破坏头部的整体布局)  -->
    <li class="dropdown">
        <div class="bsa-nav-item" data-bs-toggle="dropdown" data-bs-auto-close="outside">
            <i class="bi bi-grid"></i>
        </div>
        <div class="dropdown-menu dropdown-menu-end p-0">
            <div class="card border-0">
                <div class="card-header bg-white d-flex align-items-center justify-content-between">
                    <span class="bsa-font-15">应用列表</span>
                    <a href="javascript:" class="text-muted bsa-font-13 text-decoration-none">编辑</a>
                </div>
                <div class="card-body p-0">
                    <div class="container-fluid">
                        <div class="row row-cols-3 g-3 p-3">
                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用1</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用2</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用3</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用4</div>
                            </a>
                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用5</div>
                            </a>
                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用6</div>
                            </a>
                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用7</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用8</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用9</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用10</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用11</div>
                            </a>

                        </div>
                    </div>
                </div>
                <div class="card-footer text-center bg-white">
                    <a href="javascript:" class="text-muted bsa-font-14 text-decoration-none">查看更多应用</a>
                </div>
            </div>
        </div>
    </li>
    <!--    通知    -->
    <li class="dropdown">
        <div class="bsa-nav-item" data-bs-toggle="dropdown">
            <div class="bsa-header-badge-wrapper">
                <span class="bsa-header-badge">99+</span>
                <i class="bi bi-bell"></i>
            </div>
        </div>
        <div class="dropdown-menu dropdown-menu-end p-0">
            <div class="card border-0">
                <div class="card-header bg-white d-flex align-items-center justify-content-between">
                    <span class="bsa-font-15">通知列表</span>
                    <a href="javascript:" class="text-muted bsa-font-13 text-decoration-none">全部设为已读</a>
                </div>
                <div class="card-body p-0">
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <div class="d-flex align-items-center justify-content-center bsa-font-20 bsa-height-45 bsa-width-45 rounded-circle bsa-bg-color1 text-white">
                            <i class="bi bi-cart"></i>
                        </div>
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">新订单</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                您收到新的订单
                            </div>
                            <div class="small text-muted">10秒前</div>
                        </div>
                    </a>
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <div class="d-flex align-items-center justify-content-center bsa-font-20 bsa-height-45 bsa-width-45 rounded-circle bsa-bg-color2 text-white">
                            <i class="bi bi-people"></i>
                        </div>
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">新增用户</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                100个新用户注册
                            </div>
                            <div class="small text-muted">30分钟前</div>
                        </div>
                    </a>
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <div class="d-flex align-items-center justify-content-center bsa-font-20 bsa-height-45 bsa-width-45 rounded-circle bsa-bg-color3 text-white">
                            <i class="bi bi-chat-square-dots"></i>
                        </div>
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">新的评论</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                您收到客户新的评论
                            </div>
                            <div class="small text-muted">2天前</div>
                        </div>
                    </a>
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <div class="d-flex align-items-center justify-content-center bsa-font-20 bsa-height-45 bsa-width-45 rounded-circle bsa-bg-color4 text-white">
                            <i class="bi bi-cart-check"></i>
                        </div>
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">订单已经发货</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                您的商品已在运送途中
                            </div>
                            <div class="small text-muted">3天前</div>
                        </div>
                    </a>
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <div class="d-flex align-items-center justify-content-center bsa-font-20 bsa-height-45 bsa-width-45 rounded-circle bsa-bg-color4 text-white">
                            <i class="bi bi-person-workspace"></i>
                        </div>
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">新的同事</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                新增3位后台管理工作成员
                            </div>
                            <div class="small text-muted">1周前</div>
                        </div>
                    </a>
                </div>
                <div class="card-footer text-center bg-white">
                    <a href="javascript:" class="text-muted bsa-font-14 text-decoration-none">查看所有通知</a>
                </div>
            </div>
        </div>
    </li>
    <!--    消息    -->
    <li class="dropdown">
        <div class="bsa-nav-item" data-bs-toggle="dropdown">
            <div class="bsa-header-badge-wrapper">
                <span class="bsa-header-badge">9</span>
                <i class="bi bi-chat-left"></i>
            </div>
        </div>
        <div class="dropdown-menu dropdown-menu-end p-0">
            <div class="card border-0">
                <div class="card-header bg-white d-flex align-items-center justify-content-between">
                    <span class="bsa-font-15">消息列表</span>
                    <a href="javascript:" class="text-muted bsa-font-13 text-decoration-none">全部设为已读</a>
                </div>
                <div class="card-body p-0">
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <img src="https://temp.im/120x120" class="bsa-height-45 bsa-width-45 rounded-circle" alt="头像">
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">Jack</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                I'm fine
                            </div>
                            <div class="small text-muted">6分钟前</div>
                        </div>
                    </a>
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <img src="https://temp.im/120x120" class="bsa-height-45 bsa-width-45 rounded-circle" alt="头像">
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">Rose</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                            </div>
                            <div class="small text-muted">3小时前</div>
                        </div>
                    </a>
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <img src="https://temp.im/120x120" class="bsa-height-45 bsa-width-45 rounded-circle" alt="头像">
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">Ben</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                Lorem ipsum dolor sit amet, consectetur.
                            </div>
                            <div class="small text-muted">1天前</div>
                        </div>
                    </a>
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <img src="https://temp.im/120x120" class="bsa-height-45 bsa-width-45 rounded-circle" alt="头像">
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">Emily</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium
                                architecto autem corporis, eos illo illum itaque nemo nisi, optio sint vitae?
                                Accusantium dolor eius enim iste laudantium perferendis porro!
                            </div>
                            <div class="small text-muted">3天前</div>
                        </div>
                    </a>
                </div>
                <div class="card-footer text-center bg-white">
                    <a href="javascript:" class="text-muted bsa-font-14 text-decoration-none">查看所有消息</a>
                </div>
            </div>
        </div>
    </li>
    <!--    用户信息    -->
    <li class="dropdown">
        <div class="bsa-nav-item" data-bs-toggle="dropdown">
            <div class="d-flex align-items-center mb-2">
                <img src="https://temp.im/120x120" class="bsa-height-40 bsa-width-40 rounded-circle" alt="用户头像">
                <div class="flex-shrink-0 ms-2 bsa-max-width-150 bsa-user-details">
                    <div class="bsa-font-15 bsa-ellipsis">欲饮琵琶码上催</div>
                    <div class="bsa-font-13 bsa-ellipsis">超级管理员</div>
                </div>
            </div>
        </div>
        <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="javascript:"><i class="bi bi-person me-2"></i>个人资料</a></li>
            <li><a class="dropdown-item" href="javascript:"><i class="bi bi-gear me-2"></i>设置</a></li>
            <li>
                <div class="dropdown-divider"></div>
            </li>
            <li><a class="dropdown-item" href="javascript:"><i class="bi bi-box-arrow-right me-2"></i>退出登录</a>
            </li>
        </ul>
    </li>
</ul>
<!--侧边栏-->
<div class="bsa-sidebar">
    <div class="bsa-sidebar-header">
        <img src="static/images/logo-icon.png" class="bsa-logo-icon" alt="logo-icon">
        <div class="bsa-logo-text">Bootstrap-Admin</div>
    </div>
    <div class="bsa-sidebar-body">
        <ul class="bsa-menu">
            <li>
                <a href="index.html">
                    <i class="bi bi-house"></i>首页
                </a>
            </li>
            <li>
                <a href="javascript:" class="has-children active open">
                    <i class="bi bi-columns-gap"></i>UI组件
                </a>
                <ul>
                    <li>
                        <a href="javascript:" class="has-children">表单</a>
                        <ul>
                            <li><a href="component-form-elements.html">基础元素</a></li>
                            <li><a href="component-form-validations.html">表单验证</a></li>
                            <li><a href="component-form-layouts.html">表单布局</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:" class="has-children active open">栏</a>
                        <ul>
                            <li><a href="component-navs.html">导航</a></li>
                            <li><a href="component-navbar.html" class="active">导航栏</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="component-tabs.html">选项卡</a>
                    </li>
                    <li>
                        <a href="component-card.html">卡片</a>
                    </li>
                    <li>
                        <a href="component-button.html">按钮</a>
                    </li>
                    <li>
                        <a href="component-accordion.html">手风琴</a>
                    </li>
                    <li>
                        <a href="component-alert.html">警告框</a>
                    </li>
                    <li>
                        <a href="component-badge.html">徽章</a>
                    </li>
                    <li>
                        <a href="component-breadcrumb.html">面包屑</a>
                    </li>
                    <li>
                        <a href="component-table.html">表格</a>
                    </li>
                    <li>
                        <a href="component-carousel.html">幻灯片</a>
                    </li>
                    <li>
                        <a href="component-collapse.html">折叠</a>
                    </li>
                    <li>
                        <a href="component-dropdowns.html">下拉菜单</a>
                    </li>
                    <li>
                        <a href="component-list-group.html">列表组</a>
                    </li>
                    <li>
                        <a href="component-modal.html">模态框</a>
                    </li>
                    <li>
                        <a href="component-offcanvas.html">抽屉</a>
                    </li>
                    <li>
                        <a href="component-pagination.html">分页</a>
                    </li>
                    <li>
                        <a href="component-placeholders.html">骨架屏</a>
                    </li>
                    <li>
                        <a href="component-popovers.html">气泡</a>
                    </li>
                    <li>
                        <a href="javascript:" class="has-children">进度</a>
                        <ul>
                            <li><a href="component-progress.html">进度条</a></li>
                            <li><a href="component-spinners.html">进度环</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="component-scrollspy.html">滚动监听</a>
                    </li>
                    <li>
                        <a href="component-toasts.html">吐司</a>
                    </li>
                    <li>
                        <a href="component-tooltips.html">提示</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-filetype-html"></i>页面
                </a>
                <ul>
                    <li>
                        <a href="page-blank.html">新页面</a>
                    </li>
                    <li>
                        <a href="page-list.html">列表页面</a>
                    </li>
                    <li>
                        <a href="page-add.html">表单新增</a>
                    </li>
                    <li>
                        <a href="page-add2.html">表单新增2</a>
                    </li>
                    <li>
                        <a href="page-login.html">登录页面</a>
                    </li>
                    <li>
                        <a href="page-login2.html">登录页面2</a>
                    </li>
                    <li>
                        <a href="page-comment.html">评论页</a>
                    </li>
                    <li>
                        <a href="page-pricing.html">产品定价</a>
                    </li>
                    <li>
                        <a href="page-lock-screen.html">锁屏页</a>
                    </li>
                    <li>
                        <a href="page-article-list.html">文章列表页</a>
                    </li>
                    <li>
                        <a href="page-products-details.html">商品详情页</a>
                    </li>
                    <li>
                        <a href="page-profile.html">个人资料</a>
                    </li>
                    <li>
                        <a href="page-timeline.html">时间轴</a>
                    </li>
                    <li>
                        <a href="page-error.html">400/500页面</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-filetype-js"></i>插件
                </a>
                <ul>
                    <li><a href="plugin-fullcalendar.html">日历</a></li>
                    <li>
                        <a href="javascript:" class="has-children">图表</a>
                        <ul>
                            <li><a href="plugin-chart.html">chart.js</a></li>
                            <li><a href="plugin-echarts.html">echart.js</a></li>
                        </ul>
                    </li>
                    <li><a href="plugin-bootstrap-notify.html">通知插件</a></li>
                    <li><a href="plugin-bootstrap-dialog.html">弹层插件</a></li>
                    <li><a href="plugin-formvalidation.html">表单验证</a></li>
                    <li><a href="plugin-tempus-dominus.html">日期时间选择</a></li>
                    <li><a href="plugin-tinymce.html">富文本编辑器</a></li>
                    <li><a href="plugin-dropzone.html">文件上传</a></li>
                    <li><a href="plugin-croppie.html">头像裁剪</a></li>
                    <li><a href="plugin-ztree.html">树形组件</a></li>
                    <li><a href="plugin-select2.html">select2</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-list-nested"></i>多级菜单
                </a>
                <ul>
                    <li><a href="javascript:">一级菜单</a></li>
                    <li>
                        <a href="javascript:" class="has-children">一级菜单</a>
                        <ul>
                            <li><a href="javascript:">二级菜单</a></li>
                            <li>
                                <a href="javascript:" class="has-children">二级菜单</a>
                                <ul>
                                    <li><a href="javascript:">三级菜单</a></li>
                                    <li>
                                        <a href="javascript:" class="has-children">三级菜单</a>
                                        <ul>
                                            <li><a href="javascript:">四级菜单</a></li>
                                            <li><a href="javascript:">四级菜单</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:" class="has-children">一级菜单</a>
                        <ul>
                            <li><a href="javascript:">二级菜单</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<!--内容区域-->
<div class="bsa-main-wrapper">
    <div class="bsa-main-content">
        <!-- 内容都应该被包裹在此-->
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <div class="container-fluid">
                    <div class="row row-cols-1 gap-3">

                        <div class="col">

                            <h5 class="card-title">基本示例</h5>
                            <hr>
                            <div class="bsa-component">
                                <nav class="navbar navbar-expand-lg navbar-light bg-light">
                                    <div class="container-fluid">
                                        <a class="navbar-brand" href="javascript:">Navbar</a>
                                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#navbarSupportedContent"
                                                aria-controls="navbarSupportedContent" aria-expanded="false"
                                                aria-label="Toggle navigation">
                                            <span class="navbar-toggler-icon"></span>
                                        </button>
                                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                                            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                                                <li class="nav-item">
                                                    <a class="nav-link active" aria-current="page" href="javascript:">Home</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" href="javascript:">Link</a>
                                                </li>
                                                <li class="nav-item dropdown">
                                                    <a class="nav-link dropdown-toggle" href="javascript:"
                                                       id="navbarDropdown"
                                                       role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                        Dropdown
                                                    </a>
                                                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                                        <li><a class="dropdown-item" href="javascript:">Action</a></li>
                                                        <li><a class="dropdown-item" href="javascript:">Another
                                                            action</a></li>
                                                        <li>
                                                            <hr class="dropdown-divider">
                                                        </li>
                                                        <li><a class="dropdown-item" href="javascript:">Something else
                                                            here</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link disabled">Disabled</a>
                                                </li>
                                            </ul>
                                            <form class="d-flex">
                                                <input class="form-control me-2" type="search" placeholder="Search"
                                                       aria-label="Search">
                                                <button class="btn btn-outline-success" type="submit">Search</button>
                                            </form>
                                        </div>
                                    </div>
                                </nav>
                            </div>
                        </div>


                        <div class="col">
                            <h5 class="card-title">携带Logo</h5>
                            <hr>
                            <div class="bsa-component">
                                <nav class="navbar navbar-expand-lg navbar-light bg-light">
                                    <div class="container-fluid">
                                        <a class="navbar-brand" href="javascript:">
                                            <img src="https://temp.im/100x100?text=logo" alt="" width="30" height="24"
                                                 class="d-inline-block align-text-top">
                                            Bootstrap
                                        </a>
                                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#navbarSupportedContent2"
                                                aria-controls="navbarSupportedContent" aria-expanded="false"
                                                aria-label="Toggle navigation">
                                            <span class="navbar-toggler-icon"></span>
                                        </button>
                                        <div class="collapse navbar-collapse" id="navbarSupportedContent2">
                                            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                                                <li class="nav-item">
                                                    <a class="nav-link active" aria-current="page" href="javascript:">Home</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" href="javascript:">Link</a>
                                                </li>
                                                <li class="nav-item dropdown">
                                                    <a class="nav-link dropdown-toggle" href="javascript:"
                                                       id="navbarDropdown2"
                                                       role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                        Dropdown
                                                    </a>
                                                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                                        <li><a class="dropdown-item" href="javascript:">Action</a></li>
                                                        <li><a class="dropdown-item" href="javascript:">Another
                                                            action</a></li>
                                                        <li>
                                                            <hr class="dropdown-divider">
                                                        </li>
                                                        <li><a class="dropdown-item" href="javascript:">Something else
                                                            here</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link disabled">Disabled</a>
                                                </li>
                                            </ul>
                                            <form class="d-flex">
                                                <input class="form-control me-2" type="search" placeholder="Search"
                                                       aria-label="Search">
                                                <button class="btn btn-outline-success" type="submit">Search</button>
                                            </form>
                                        </div>
                                    </div>
                                </nav>
                            </div>
                        </div>

                        <div class="col">
                            <h5 class="card-title">外部内容</h5>
                            <hr>
                            <div class="bsa-component">
                                <div class="collapse" id="navbarToggleExternalContent">
                                    <div class="bg-dark p-4">
                                        <h5 class="text-white h4">Collapsed content</h5>
                                        <span class="text-muted">Toggleable via the navbar brand.</span>
                                    </div>
                                </div>
                                <nav class="navbar navbar-dark bg-dark">
                                    <div class="container-fluid">
                                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#navbarToggleExternalContent"
                                                aria-controls="navbarToggleExternalContent" aria-expanded="false"
                                                aria-label="Toggle navigation">
                                            <span class="navbar-toggler-icon"></span>
                                        </button>
                                    </div>
                                </nav>
                            </div>
                        </div>
                        <div class="col">
                            <h5 class="card-title">和抽屉一起使用</h5>
                            <hr>
                            <div class="bsa-component">
                                <nav class="navbar navbar-light bg-light">
                                    <div class="container-fluid">
                                        <a class="navbar-brand" href="javascript:">Offcanvas navbar</a>
                                        <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas"
                                                data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
                                            <span class="navbar-toggler-icon"></span>
                                        </button>
                                        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar"
                                             aria-labelledby="offcanvasNavbarLabel">
                                            <div class="offcanvas-header">
                                                <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
                                                <button type="button" class="btn-close text-reset"
                                                        data-bs-dismiss="offcanvas" aria-label="Close"></button>
                                            </div>
                                            <div class="offcanvas-body">
                                                <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
                                                    <li class="nav-item">
                                                        <a class="nav-link active" aria-current="page"
                                                           href="javascript:">Home</a>
                                                    </li>
                                                    <li class="nav-item">
                                                        <a class="nav-link" href="javascript:">Link</a>
                                                    </li>
                                                    <li class="nav-item dropdown">
                                                        <a class="nav-link dropdown-toggle" href="javascript:"
                                                           id="offcanvasNavbarDropdown" role="button"
                                                           data-bs-toggle="dropdown" aria-expanded="false">
                                                            Dropdown
                                                        </a>
                                                        <ul class="dropdown-menu"
                                                            aria-labelledby="offcanvasNavbarDropdown">
                                                            <li><a class="dropdown-item" href="javascript:">Action</a>
                                                            </li>
                                                            <li><a class="dropdown-item" href="javascript:">Another
                                                                action</a></li>
                                                            <li>
                                                                <hr class="dropdown-divider">
                                                            </li>
                                                            <li><a class="dropdown-item" href="javascript:">Something
                                                                else here</a></li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                                <form class="d-flex">
                                                    <input class="form-control me-2" type="search" placeholder="Search"
                                                           aria-label="Search">
                                                    <button class="btn btn-outline-success" type="submit">Search
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </nav>
                            </div>
                        </div>
                        <div class="col">
                            <div class="bsa-component">

                            </div>
                        </div>
                        <div class="col">
                            <div class="bsa-component">

                            </div>
                        </div>
                        <div class="col">
                            <div class="bsa-component">

                            </div>
                        </div>
                        <div class="col">
                            <div class="bsa-component">

                            </div>
                        </div>
                        <div class="col">
                            <div class="bsa-component">

                            </div>
                        </div>
                        <div class="col">

                            <h5 class="card-title">携带图标以及不同的情景色</h5>
                            <hr>
                            <div class="row row-cols-1 g-3">
                                <div class="col">
                                    <div class="bsa-component">
                                        <nav class="navbar navbar-expand-lg navbar-dark bg-dark rounded">
                                            <div class="container-fluid"><a class="navbar-brand" href="javascript:">Navbar</a>
                                                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                                                        data-bs-target="#navcnt1"
                                                        aria-controls="navcnt1" aria-expanded="false"
                                                        aria-label="Toggle navigation"><span
                                                        class="navbar-toggler-icon"></span>
                                                </button>
                                                <div class="collapse navbar-collapse" id="navcnt1">
                                                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                                                        <li class="nav-item">
                                                            <a class="nav-link active" aria-current="page" href="javascript:">
                                                                <i class='bi bi-house me-1'></i>Home
                                                            </a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a class="nav-link" href="javascript:">
                                                                <i class='bi bi-person me-1'></i>About
                                                            </a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a class="nav-link" href="javascript:">
                                                                <i class='bi bi-grid me-1'></i>Features
                                                            </a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a class="nav-link" href="javascript:">
                                                                <i class='bi bi-mic me-1'></i>Contact
                                                            </a>
                                                        </li>
                                                        <li class="nav-item dropdown">
                                                            <a class="nav-link dropdown-toggle" href="javascript:" role="button"
                                                               data-bs-toggle="dropdown"
                                                               aria-expanded="false">
                                                                Dropdown
                                                            </a>
                                                            <ul class="border-0 bsa-radius-15 dropdown-menu shadow">
                                                                <li><a class="dropdown-item" href="javascript:">Action</a>
                                                                </li>
                                                                <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                                </li>
                                                                <li>
                                                                    <hr class="dropdown-divider">
                                                                </li>
                                                                <li><a class="dropdown-item" href="javascript:">Something else
                                                                    here</a>
                                                                </li>
                                                            </ul>
                                                        </li>
                                                    </ul>
                                                    <form class="d-flex bsa-nav-search">
                                                        <div class="input-group">
                                                            <input aria-label="搜索关键字" type="text" class="form-control"
                                                                   placeholder="搜索关键字"/>
                                                            <button class="btn" type="submit"><i class='bi bi-search'></i>
                                                            </button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </nav>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="bsa-component">
                                        <nav class="navbar navbar-expand-lg navbar-dark bsa-bg-primary rounded">
                                            <div class="container-fluid"><a class="navbar-brand" href="javascript:">Navbar</a>
                                                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                                                        data-bs-target="#navcnt2"
                                                        aria-controls="navcnt2" aria-expanded="false"
                                                        aria-label="Toggle navigation"><span
                                                        class="navbar-toggler-icon"></span>
                                                </button>
                                                <div class="collapse navbar-collapse" id="navcnt2">
                                                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                                                        <li class="nav-item">
                                                            <a class="nav-link active" aria-current="page" href="javascript:">
                                                                <i class='bi bi-house me-1'></i>Home
                                                            </a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a class="nav-link" href="javascript:">
                                                                <i class='bi bi-person me-1'></i>About
                                                            </a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a class="nav-link" href="javascript:">
                                                                <i class='bi bi-grid me-1'></i>Features
                                                            </a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a class="nav-link" href="javascript:">
                                                                <i class='bi bi-mic me-1'></i>Contact
                                                            </a>
                                                        </li>
                                                        <li class="nav-item dropdown">
                                                            <a class="nav-link dropdown-toggle" href="javascript:" role="button"
                                                               data-bs-toggle="dropdown"
                                                               aria-expanded="false">
                                                                Dropdown
                                                            </a>
                                                            <ul class="border-0 bsa-radius-15 dropdown-menu shadow">
                                                                <li><a class="dropdown-item" href="javascript:">Action</a>
                                                                </li>
                                                                <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                                </li>
                                                                <li>
                                                                    <hr class="dropdown-divider">
                                                                </li>
                                                                <li><a class="dropdown-item" href="javascript:">Something else
                                                                    here</a>
                                                                </li>
                                                            </ul>
                                                        </li>
                                                    </ul>
                                                    <form class="d-flex">
                                                        <button class="btn btn-light px-4" type="submit"><i
                                                                class="bi bi-cart"></i> 立即购买
                                                        </button>
                                                    </form>
                                                </div>
                                            </div>
                                        </nav>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="bsa-component">
                                        <nav class="navbar navbar-expand-lg navbar-dark bsa-bg-danger rounded">
                                            <div class="container-fluid"><a class="navbar-brand" href="javascript:">Navbar</a>
                                                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                                                        data-bs-target="#navcnt3"
                                                        aria-controls="navcnt3" aria-expanded="false"
                                                        aria-label="Toggle navigation"><span
                                                        class="navbar-toggler-icon"></span>
                                                </button>
                                                <div class="collapse navbar-collapse" id="navcnt3">
                                                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                                                        <li class="nav-item">
                                                            <a class="nav-link active" aria-current="page" href="javascript:">
                                                                <i class='bi bi-house me-1'></i>Home
                                                            </a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a class="nav-link" href="javascript:">
                                                                <i class='bi bi-person me-1'></i>About
                                                            </a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a class="nav-link" href="javascript:">
                                                                <i class='bi bi-grid me-1'></i>Features
                                                            </a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a class="nav-link" href="javascript:">
                                                                <i class='bi bi-mic me-1'></i>Contact
                                                            </a>
                                                        </li>
                                                        <li class="nav-item dropdown">
                                                            <a class="nav-link dropdown-toggle" href="javascript:" role="button"
                                                               data-bs-toggle="dropdown"
                                                               aria-expanded="false">
                                                                Dropdown
                                                            </a>
                                                            <ul class="border-0 bsa-radius-15 dropdown-menu shadow">
                                                                <li><a class="dropdown-item" href="javascript:">Action</a>
                                                                </li>
                                                                <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                                </li>
                                                                <li>
                                                                    <hr class="dropdown-divider">
                                                                </li>
                                                                <li><a class="dropdown-item" href="javascript:">Something else
                                                                    here</a>
                                                                </li>
                                                            </ul>
                                                        </li>
                                                    </ul>
                                                    <form class="d-flex">
                                                        <button class="btn btn-dark me-3 bsa-radius-30 px-4" type="submit">
                                                            <i class="bi bi-lock"></i> 登录
                                                        </button>
                                                        <button class="btn btn-light bsa-radius-30 px-4" type="submit"><i
                                                                class="bi bi-person"></i> 注册
                                                        </button>
                                                    </form>
                                                </div>
                                            </div>
                                        </nav>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="bsa-component">
                                        <nav class="navbar navbar-expand-lg navbar-dark bsa-bg-success rounded">
                                            <div class="container-fluid"><a class="navbar-brand" href="javascript:">Navbar</a>
                                                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                                                        data-bs-target="#navcnt4"
                                                        aria-controls="navcnt4" aria-expanded="false"
                                                        aria-label="Toggle navigation"><span
                                                        class="navbar-toggler-icon"></span>
                                                </button>
                                                <div class="collapse navbar-collapse" id="navcnt4">
                                                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                                                        <li class="nav-item">
                                                            <a class="nav-link active" aria-current="page" href="javascript:">
                                                                <i class='bi bi-house me-1'></i>Home
                                                            </a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a class="nav-link" href="javascript:">
                                                                <i class='bi bi-person me-1'></i>About
                                                            </a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a class="nav-link" href="javascript:">
                                                                <i class='bi bi-grid me-1'></i>Features
                                                            </a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a class="nav-link" href="javascript:">
                                                                <i class='bi bi-mic me-1'></i>Contact
                                                            </a>
                                                        </li>
                                                        <li class="nav-item dropdown">
                                                            <a class="nav-link dropdown-toggle" href="javascript:" role="button"
                                                               data-bs-toggle="dropdown"
                                                               aria-expanded="false">
                                                                Dropdown
                                                            </a>
                                                            <ul class="border-0 bsa-radius-15 dropdown-menu shadow">
                                                                <li><a class="dropdown-item" href="javascript:">Action</a>
                                                                </li>
                                                                <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                                </li>
                                                                <li>
                                                                    <hr class="dropdown-divider">
                                                                </li>
                                                                <li><a class="dropdown-item" href="javascript:">Something else
                                                                    here</a>
                                                                </li>
                                                            </ul>
                                                        </li>
                                                    </ul>
                                                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                                                        <li class="nav-item"><a class="nav-link" href="javascript:"><i
                                                                class="bi bi-bell-slash bsa-font-20 text-white"></i></a>
                                                        </li>
                                                        <li class="nav-item"><a class="nav-link" href="javascript:"><i
                                                                class="bi bi-github bsa-font-20 text-white"></i></a>
                                                        </li>
                                                        <li class="nav-item"><a class="nav-link" href="javascript:"><i
                                                                class="bi bi-wifi bsa-font-20 text-white"></i></a>
                                                        </li>
                                                        <li class="nav-item"><a class="nav-link" href="javascript:"><i
                                                                class="bi bi-airplane-engines-fill bsa-font-20 text-white"></i></a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </nav>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="bsa-component">
                                        <nav class="navbar navbar-expand-lg navbar-dark bg-secondary rounded">
                                            <div class="container-fluid"><a class="navbar-brand" href="javascript:">Navbar</a>
                                                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                                                        data-bs-target="#navcnt5"
                                                        aria-controls="navcnt5" aria-expanded="false"
                                                        aria-label="Toggle navigation"><span
                                                        class="navbar-toggler-icon"></span>
                                                </button>
                                                <div class="collapse navbar-collapse" id="navcnt5">
                                                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                                                        <li class="nav-item">
                                                            <a class="nav-link active" aria-current="page" href="javascript:">
                                                                <i class='bi bi-house me-1'></i>Home
                                                            </a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a class="nav-link" href="javascript:">
                                                                <i class='bi bi-person me-1'></i>About
                                                            </a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a class="nav-link" href="javascript:">
                                                                <i class='bi bi-grid me-1'></i>Features
                                                            </a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a class="nav-link" href="javascript:">
                                                                <i class='bi bi-mic me-1'></i>Contact
                                                            </a>
                                                        </li>
                                                        <li class="nav-item dropdown">
                                                            <a class="nav-link dropdown-toggle" href="javascript:" role="button"
                                                               data-bs-toggle="dropdown"
                                                               aria-expanded="false">
                                                                Dropdown
                                                            </a>
                                                            <ul class="border-0 bsa-radius-15 dropdown-menu shadow">
                                                                <li><a class="dropdown-item" href="javascript:">Action</a>
                                                                </li>
                                                                <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                                </li>
                                                                <li>
                                                                    <hr class="dropdown-divider">
                                                                </li>
                                                                <li><a class="dropdown-item" href="javascript:">Something else
                                                                    here</a>
                                                                </li>
                                                            </ul>
                                                        </li>
                                                    </ul>
                                                    <form class="d-flex">
                                                        <button class="btn btn-dark me-3 bsa-radius-30 px-4" type="submit">
                                                            <i class="bi bi-lock"></i> 登录
                                                        </button>
                                                        <button class="btn btn-light bsa-radius-30 px-4" type="submit"><i
                                                                class="bi bi-browser-chrome"></i> 自由浏览
                                                        </button>
                                                    </form>
                                                </div>
                                            </div>
                                        </nav>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--调色板-->
<div class="bsa-switcher">
    <div class="bsa-switcher-toggler-btn">
        <div class="bsa-switcher-toggler-icon">
            <i class="bi bi-gear"></i>
        </div>
    </div>
    <div class="bsa-switcher-header">
        <h5 class="bsa-switcher-header-title">自定义主题</h5>
        <button type="button" class="btn-close text-reset bsa-switcher-toggler-btn"></button>
    </div>
    <div class="bsa-switcher-body">
        <div class="row row-cols-1 g-4">
            <div class="col">
                <h6>头部颜色</h6>
                <hr>
                <div class="bsa-headercolor-wrap">
                    <div class="row row-cols-auto g-3">
                        <div class="col">
                            <div class="headercolor0"></div>
                        </div>
                        <div class="col">
                            <div class="headercolor1"></div>
                        </div>
                        <div class="col">
                            <div class="headercolor2"></div>
                        </div>
                        <div class="col">
                            <div class="headercolor3"></div>
                        </div>
                        <div class="col">
                            <div class="headercolor4"></div>
                        </div>
                        <div class="col">
                            <div class="headercolor5"></div>
                        </div>
                        <div class="col">
                            <div class="headercolor6"></div>
                        </div>
                        <div class="col">
                            <div class="headercolor7"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <h6>侧边栏颜色</h6>
                <hr>
                <div class="bsa-sidebarcolor-wrap">
                    <div class="row row-cols-auto g-3">
                        <div class="col">
                            <div class="sidebarcolor0"></div>
                        </div>
                        <div class="col">
                            <div class="sidebarcolor1"></div>
                        </div>
                        <div class="col">
                            <div class="sidebarcolor2"></div>
                        </div>
                        <div class="col">
                            <div class="sidebarcolor3"></div>
                        </div>
                        <div class="col">
                            <div class="sidebarcolor4"></div>
                        </div>
                        <div class="col">
                            <div class="sidebarcolor5"></div>
                        </div>
                        <div class="col">
                            <div class="sidebarcolor6"></div>
                        </div>
                        <div class="col">
                            <div class="sidebarcolor7"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--代码高亮js-->
<script src="lib/prismjs/prism.js"></script>
<script src="static/js/bootstrap.bundle.min.js"></script>
<script src="static/js/bootstrap-admin.min.js"></script>


</body>
</html>